<template>
  <div class="page_body">
    <HomeTop :topTitle="topTitle"></HomeTop>
    <div class="register_body">
      <div
        style="
          width: 100vw;
          display: flex;
          flex-direction: column;
          align-items: center;
        "
      >
        <div class="register_from_box">
          <!-- 身份信息栏 -->
          <div v-if="stepKey != 2">
            <div class="register_from_item border_item">
              <div class="border_item_popup_box" style="height: 100%">
                <div class="coach_register_from_upload_img">
                  <div class="border_item_title">
                    <div class="border_item_title_tips">*</div>
                    队伍图片
                  </div>
                  <div
                    class="border_item_popup no_value_item"
                    style="width: 4.8rem; height: 0.94rem; line-height: 0.94rem"
                  >
                    请上传图片
                  </div>
                </div>

                <div class="upload_img_box">
                  <img
                    v-if="teamData.photo == null || teamData.photo == ''"
                    class="upload_img_box_icon"
                    src="../../assets/image/upload_img_bg03.png"
                  />
                  <img
                    v-if="teamData.photo != null && teamData.photo != ''"
                    class="upload_img_box_icon"
                    :src="teamData.photo"
                  />
                  <input
                    type="file"
                    accept="image/*"
                    ref="uploadImg"
                    id="upload_img_btn"
                    @change="uploadImgBtn($event)"
                  />
                </div>
                <img
                  src="../../assets/image/to_icon03.png"
                  class="popup_icon"
                />
              </div>
            </div>

            <div class="register_from_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                队伍名称
              </div>
              <input
                class="register_from_item_input"
                placeholder="请输入队伍名称"
                type="text"
                v-model="teamData.teamName"
                maxlength="7"
              />
            </div>

            <!-- <div class="register_from_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                队伍人数
              </div>
              <input
                class="register_from_item_input"
                placeholder="请输入队伍人数"
                type="number"
                v-model="teamData.teamNum"
                maxlength="6"
              />
            </div> -->

            <div class="register_from_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                请输入领队姓名
              </div>
              <input
                class="register_from_item_input"
                placeholder="请输入领队姓名"
                type="text"
                v-model="teamData.leaderName"
                maxlength="7"
              />
            </div>

            <div class="register_from_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                领队电话
              </div>
              <input
                class="register_from_item_input"
                placeholder="请输入领队电话"
                type="text"
                v-model="teamData.leaderNumber"
                maxlength="11"
              />
            </div>

            <div class="register_from_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                证件号
              </div>
              <input
                class="register_from_item_input"
                placeholder="请输入证件号"
                type="text"
                v-model="teamData.identity_number"
                maxlength="18"
              />
            </div>

            <div
              class="register_from_item upload_img_item"
              style="justify-content: space-around; margin-top: 0.4rem"
              v-show="teamData.identity_type != 0"
            >
              <div class="upload_file_box">
                <img
                  v-if="
                    teamData.identity_up == null || teamData.identity_up == ''
                  "
                  class="upload_file_box_img"
                  src="../../assets/image/identity_up_img01.png"
                />
                <img
                  v-if="
                    teamData.identity_up != null && teamData.identity_up != ''
                  "
                  class="upload_file_box_img"
                  :src="teamData.identity_up"
                />

                <input
                  type="file"
                  accept="image/*"
                  ref="identityUp"
                  class="upload_file_box_input"
                  @change="uploadIdentityBtn($event, '1')"
                />
                <div class="upload_file_box_btn">+上传身份证人像面</div>
              </div>
              <div class="upload_file_box">
                <img
                  v-if="
                    teamData.identity_down == null ||
                    teamData.identity_down == ''
                  "
                  class="upload_file_box_img"
                  src="../../assets/image/identity_down_img01.png"
                />
                <img
                  v-if="
                    teamData.identity_down != null &&
                    teamData.identity_down != ''
                  "
                  class="upload_file_box_img"
                  :src="teamData.identity_down"
                />
                <input
                  type="file"
                  accept="image/*"
                  ref="identityDown"
                  class="upload_file_box_input"
                  @change="uploadIdentityDownBtn($event, '2')"
                />
                <div class="upload_file_box_btn">+上传身份证国徽面</div>
              </div>
            </div>
          </div>
          <div class="register_from_send_btn" @click="nextStep()">下一步</div>
          <!-- <div
            class="register_from_send_btn"
            v-if="stepKey == 3"
            @click="submitDataFn()"
          >
            提交
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<style src="../../assets/css/coach/coachImprove.css" scoped></style>

<script>
import { Indicator, Toast } from "mint-ui";
import HomeTop from "@/components/homeTop.vue";
export default {
  name: "CoachImprove",
  components: { HomeTop },
  data() {
    return {
      baseAPIUrl: this.$store.state.baseAPIUrl,
      topTitle: "创建队伍",
      stepKey: 1, // 步骤条值
      teamData: {
        id:undefined,
        photo: "", //队伍图片
        teamName: "", // 队伍名称
        // teamNum: "", //队伍人数
        leaderName: "", //领队姓名
        leaderNumber: "", //领队电话
        identity_number: "", // 证件号
        identity_up: "", // 证件正面
        identity_down: "", // 证件反面
      },
      identity_up: "",
      identity_down: "",
      type: "",
      uploadUrl: "", // 提交用图片路径Q
      url: "",
    };
  },
  created: function () {
    // this.getList();
  },
  methods: {
    getList() {
      let that = this;
      let url = "/mobile/teamDetail";
      // let uploadType = type;
      let data = {
        team_id: that.$route.query.index,
      };
      Indicator.open();
      this.axios
        .post(url, data)
        .then((response) => {
          Indicator.close();
          if (response.code == 0) {
              this.teamData.photo == response.team.image_path
              this.teamData.teamName == response.team.name 
              this.teamData.leaderName == response.team.leader_name
              this.teamData.leaderNumber == response.team.identity_number 
              this.teamData.identity_number == response.team.identity_number 
              this.teamData.identity_up == response.team.identity_up 
              this.teamData.identityDown == response.team.identity_down;
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          // console.log(error);
        });
    },
    // 上传头像图片
    uploadImgBtn: function (e) {
      let that = this;
      let file = e.target.files[0];
      if (file.size > 1024 * 1024 * 3) {
        Toast({
          message: "照片大小超过3MB",
          duration: 3000,
        });
        that.$refs.uploadImg.value = "";
      } else {
        if (file != undefined && file != null) {
          let reader = new FileReader();
          reader.onload = (res) => {
            let image = new Image();
            image.onload = function () {
              let width = image.width;
              let height = image.height;
              let cl = height / width;
              that.uploadImgFn(res.target.result);
              // if (cl >= 1.28 && cl <= 1.52) {

              // } else {
              //   that.$refs.uploadImg.value = "";
              //   Toast({
              //     message: "照片尺寸不合规",
              //     duration: 3000,
              //   });
              // }
            };
            image.src = res.target.result;
          };
          reader.readAsDataURL(file);
        }
      }
    },

    // 上传图片到服务器
    uploadImgFn: function (imgData) {
      let that = this;
      let url = "/upload/uploadImage";
      let data = {
        source: 1,
        image: imgData,
      };
      Indicator.open("上传中...");
      this.axios
        .post(url, JSON.stringify(data))
        .then((res) => {
          Indicator.close();
          // console.log(res, "222");
          if (res.code == 0) {
            let path = res.image;
            that.uploadUrl = res.image;
            // console.log(that.uploadUrl, "2");
            that.teamData.photo = path;
          } else {
            Toast({
              message: res.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          // console.log(error);
        });
    },

    // 上传身份证正面
    uploadIdentityBtn: function (e, id) {
      // console.log(e, id, "222");
      this.type = id;
      let that = this;
      let file = e.target.files[0];

      if (file.size > 1024 * 1024 * 3) {
        that.$refs.identityDown.value = "";
        Toast({
          message: "照片大小超过3MB",
          duration: 3000,
        });
      } else {
        if (file != undefined && file != null) {
          let reader = new FileReader();
          reader.onload = (res) => {
            that.uploadIdentityFn(res.target.result, 2);
          };
          reader.readAsDataURL(file);
        }
      }
    },

    // 上传身份证背面
    uploadIdentityDownBtn: function (e, id) {
      this.type = id;
      let that = this;
      let file = e.target.files[0];
      if (file.size > 1024 * 1024 * 3) {
        that.$refs.identityDown.value = "";
        Toast({
          message: "照片大小超过3MB",
          duration: 3000,
        });
      } else {
        if (file != undefined && file != null) {
          let reader = new FileReader();
          reader.onload = (res) => {
            that.uploadIdentityFn(res.target.result, 2);
          };
          reader.readAsDataURL(file);
        }
      }
    },

    // 上传身份证到服务器
    uploadIdentityFn: function (imgData) {
      let that = this;
      let url = "/upload/uploadCard";
      // let uploadType = type;
      let data = {
        type: this.type,
        image: imgData,
      };
      Indicator.open("上传中...");
      this.axios
        .post(url, JSON.stringify(data))
        .then((response) => {
          Indicator.close();
          if (response.code == 0) {
            // console.log(response, "2232");
            let path = response.image;
            if (that.type == 1) {
              // console.log(999);
              that.identity_up = response.image;
              that.idname = response.idname;
              that.idnumber = response.idnumber;
              that.teamData.identity_up = path;
            } else {
              that.identity_down = response.image;
              that.teamData.identity_down = path;
            }
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          // console.log(error);
        });
    },
    // 下一步
    nextStep: function () {
      if (
        this.teamData.photo == "" ||
        this.teamData.teamName == "" ||
        this.teamData.leaderName == "" ||
        this.teamData.leaderNumber == "" ||
        this.teamData.identity_number == "" ||
        this.teamData.identity_up == "" ||
        this.teamData.identityDown == ""
      ) {
        Toast({
          message: "请先完善身份信息",
        });
        return false;
      } else {
        // 验证身份正则
        let idNumberText =
          /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/;
        if (!idNumberText.test(this.teamData.identity_number)) {
          Toast({
            message: "身份证格式不正确",
          });

          return false;
        } else {
          if (this.teamData.identity_number != this.idnumber) {
            Toast({
              message:
                "证件号码与上传照片中证件号码不符 该证件号为" + this.idnumber,
            });
            return false;
          }
          if (this.teamData.leaderName != this.idname) {
            Toast({
              message: "姓名与上传照片中姓名不符 该姓名为" + this.idname,
            });
            return false;
          } else {
            let url = "/mobile/createTeam";
            let data = {
              event_id: sessionStorage.getItem("id"),
              name: this.teamData.teamName,
              leader_name: this.teamData.leaderName,
              phone: this.teamData.leaderNumber,
              identity_number: this.teamData.identity_number,
              identity_type: "1",
              identity_up: this.identity_up,
              identity_down: this.identity_down,
              image_path: this.uploadUrl,
            };
            Indicator.open();
            this.axios
              .post(url, data)
              .then((res) => {
                Indicator.close();
                if (res.code == 0) {
                  sessionStorage.setItem("record_id", res.record_id); // 队伍id
                  let name = this.$route.query.name;
                  this.$router.replace({
                    name: "addMember",
                    query: {
                      name: name,
                    },
                  });
                  // console.log(res, "shangcs");
                }
              })
              .catch(function (error) {
                Indicator.close();
                // console.log(error);
              });
          }
        }
      }
    },
  },
  watch: {
    teamData: {
      handler(newval, oldval) {
        // console.log(newval);
        // console.log(oldval);
        // sessionStorage.setItem("COACHREGISTEROBJ", JSON.stringify(newval));
      },
      deep: true,
    },
  },
};
</script>
